<template>
  <div class="block-4-wrapper">
    <div class="content-wrapper">
      <el-row :gutter="20">
        <el-col v-for="item in dataList" :key="item.title" :span="6">
          <el-card shadow="always">
            <div class="card-content cursor-pointer">
              <img class="card-icon" :src="item.img" alt="" />
              <div class="title-sub">
                <div class="title">{{ item.title }}</div>
                <div class="sub">{{ item.subTitle }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  components: {},
  data() {
    return {
      dataList: [
        {
          img: require('@/assets/img/policy/icon1.png'),
          title: '全部政策',
          subTitle: '前往查看更多惠企政策',
          path: '#',
        },
        {
          img: require('@/assets/img/policy/icon2.png'),
          title: '专题政策',
          subTitle: '政策精准匹配专业服务',
          path: '#',
        },
        {
          img: require('@/assets/img/policy/icon3.png'),
          title: '我的申请',
          subTitle: '及时了解政策申报结果',
          path: '#',
        },
        {
          img: require('@/assets/img/policy/icon4.png'),
          title: '我的收藏',
          subTitle: '您感兴趣的都在这里',
          path: '#',
        },
      ],
    }
  },
  mounted() {},
})
</script>
<style lang="scss" scoped>
.block-4-wrapper {
  background-color: #f8f8f8;
  height: 165px;
  padding: 30px 0;

  .content-wrapper {
    width: 1140px;
    height: 100%;
    margin: 0 auto;
  }

  .card-content {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 65px;

    .card-icon {
      width: 40px;
      height: 40px;
      margin-right: 15px;
    }

    .title-sub {
      .title {
        font-size: 18px;
        font-weight: bold;
        color: #444451;
      }

      .sub {
        font-size: 14px;
        color: #8c8e90;
      }
    }
  }
}
</style>
